<!-- 船代财务 -->
<template>
  <div class="boat-finance">
    <!-- 查询 -->
    <el-form label-width="80px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-form-item>
            <el-date-picker
              v-model="formData.startTime"
              class="time-small"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="formData.endTime"
              class="time-small"
              align="right"
              type="date"
              @change="getshipFinancial"
              value-format="yyyy-MM-dd"
              placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-select size="mini" filterable v-model="formData.shipAgencyId" @visible-change="selectShip" @change="getshipFinancial" placeholder="船代选择">
            <el-option label="所有船代" value=""></el-option>
            <el-option v-for="item in shipList" :key="item.ID" :label="item.text" :value="item.shipAgencyId"></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <div style="display: flex; justify-content: flex-end; height: 29px;">
            <el-form-item>
              <el-input v-model="formData.searchMent" clearable @keyup.enter.native="searchFinancial()"></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" @click="searchFinancial()">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      border
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        align="center"
        label="船代">
        <template slot-scope="scope">
          {{scope.row.shipAgencyName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="箱量">
        <template slot-scope="scope">
          {{scope.row.sumCount}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="代垫费用">
        <template slot-scope="scope">
          {{scope.row.sumMoney}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  shipAgencyList,
  shipFinancial
} from './api/finance'
export default {
  data () {
    return {
      tableData: [],
      formData: {
        shipAgencyId: '',
        startTime: '',
        endTime: '',
        searchMent: ''
      },
      loading: true,
      shipList: [] // 船代列表
    }
  },
  mounted () {
    this.getshipAgencyList()
    this.getshipFinancial()
  },
  methods: {
    // 获取船代列表
    async getshipAgencyList () {
      const res = await shipAgencyList({
        customerId: this.formData.customerId
      })
      if (res.status === 200) {
        this.shipList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取船代财务
    async getshipFinancial () {
      this.loading = true
      const res = await shipFinancial({
        shipAgencyId: this.formData.shipAgencyId, // 船代id
        startTime: this.formData.startTime || '',
        endTime: this.formData.endTime || ''
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    selectShip (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.getshipAgencyList()
        }, 500)
      }
    },
    // 搜索
    searchFinancial () {
      let search = this.formData.searchMent.toLowerCase()
      let arr = []
      if (search === '') {
        this.getshipFinancial()
        return false
      }
      this.tableData.map(item => {
        for (let key in item) {
          if (item[key].toLowerCase().indexOf(search) !== -1) {
            arr.push(item)
          }
        }
      })
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            j--
          }
        }
      }
      this.tableData = arr
    }
  }
}
</script>

<style lang="less">
</style>
